<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>主界面</title>
    <!--firefox可以 chrome会下载<embed src="https://m801.music.126.net/20211115214540/13494983919b7a400060e8062857e8be/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/5546003514/e409/aed6/f93a/e0f802f6dbe22026d98c0129ec474324.m4a" autostart="true" loop="true">-->

    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="toast/jquery.toast.css"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="toast/jquery.toast.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <style type="text/css">
        .logo {
            padding-left: 20px;
            font-size: 20px;
            color: #ffffff;
            display: inline-block;
            white-space: nowrap;
            width: 30%;
            min-width: 200px;
            overflow: hidden;
            /* 完成时间 名称  速度  无限循环  是否来回 normal一个方向 alternate来回*/
            animation: 10s wordsLoop ease-out infinite alternate;
            /*animation:mymove 5s infinite ease-out normal;
            -webkit-animation:mymove 5s infinite ease-out normal;*/
        }

        /*@keyframes mymove
        {
            from {left:0px;}
            to {left:300px;}
        }

        @-webkit-keyframes mymove !* Safari and Chrome *!
        {
            from {left:0px;}
            to {left:300px;}
        }*/

        @keyframes wordsLoop {
            0% {
                transform: translateX(20px);
                -webkit-transform: translateX(20px);
            }
            100% {
                transform: translateX(100%);
                -webkit-transform: translateX(100%);
            }
        }

        @-webkit-keyframes wordsLoop {
            0% {
                transform: translateX(20px);
                -webkit-transform: translateX(20px);
            }
            100% {
                transform: translateX(100%);
                -webkit-transform: translateX(100%);
            }
        }

        .logout {
            text-align: right;
            padding-right: 30px;
            padding-top: 30px;
        }

        .logout a {
            color: white;
            text-decoration: none;
        }

        /*.foot{
            background: linear-gradient(to right, blue, white);
            -webkit-background-clip: text;
            color: transparent;
            font-weight: bold;
        }*/
        /*body{
            min-width: 1000px;
        }*/
        #m-nav-acc a {
            background: url("easyui/themes/icons/search.png") no-repeat left;
            display: block;
            padding-left: 20px;
            /*上右下左*/
            margin: 0 0 10px 0px;
            text-decoration: none;
            color: black;
            font-size: 14px;
        }

        /**
        垂直对齐div
         */
        .div-ver {
            /*display: inline-block;
            vertical-align: middle;
            padding-top: 10px;*/
            width: 100%;
            background: url("img/sand-city.png") no-repeat 20px center;
            padding-top: 5px;
        }

        /*.m-audio {
            height: 22px;
            width: 220px;
            !*clear: both;*!
            display: block;
            margin: auto
        }*/
        #m-bg-audio {
            height: 20px;
            width: 320px;
            display: block;
            margin: auto;
            opacity: 0.1;
        }

        #m-bg-audio:hover {
            opacity: 0.5;
        }
    </style>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'header',split:true,noheader:true"
     style="height:145px;min-height:135px;background:#373737;color: #fafafa">
    <div id="m-weather" style="position: absolute;right: 10px"></div>
    <div class="div-ver" style="">
        <audio id="m-bg-audio" autoplay="autoplay" controls="controls" preload="auto"
               onended="rand_bg()" src="E:\音乐\永别京华.mp3"><!--file:///E:/音乐/什么都可以.mp3-->
               <!--src="https://m801.music.126.net/20211115214540/13494983919b7a400060e8062857e8be/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/5546003514/e409/aed6/f93a/e0f802f6dbe22026d98c0129ec474324.m4a">-->
        </audio>
        <div class="logo">殇念沙城后台管理系统</div>
        <div class="logout">您好，<label id="m-uname">test</label> | <a title="退出登录" href="javascript:void(0)" onclick="logout()">退出</a>
            <div id="m-user-signature" ondblclick="resetSig()"><label id="m-un-label">写了个寂寞！！</label><input id="m-un-input" onblur="mdSignature()" style="display: none"/> </div>
        </div>
    </div>
</div>

<div data-options="region:'west',title:'导航菜单',split:true,iconCls:'icon-ok'" style="width:180px;">
    <div id="m-nav-acc" class="easyui-accordion" data-options="fit:true,border:false">
        <div title="用户管理" data-options="selected:true" style="padding:10px;">
            <a href="javascript:void(0)" title="user/user-query.html">用户查询</a>
            <a href="#">偶看</a>
        </div>
        <div title="音乐管理" style="padding:10px">
            <a href="javascript:void(0)" title="music/music-query.html">音乐查询</a>
            <a href="javascript:void(0)" title="user/user-query.html">在线搜索</a>
        </div>
        <div title="订单管理" style="padding:10px;">
            <ul class="westbar" id="m-order">
                <li id="m-order-user"><span class="icon-search"></span>订单-用户</li>
            </ul>
        </div>
        <div title="小说管理" style="padding:10px">
            <a href="javascript:void(0)" title="user/user-query.html">小说查询</a>
            <a href="javascript:void(0)" title="user/user-query.html">在线搜索</a>
        </div>

        <div title="影视管理" style="padding:10px">
            <a href="javascript:void(0)" title="user/user-query.html">影视查询</a>
            <a href="javascript:void(0)" title="user/user-query.html">在线搜索</a>
        </div>
        <div title="系统管理" style="padding:10px">
            content3
        </div>
    </div>
</div>
<div data-options="region:'east',split:true" title="目录结构" style="width:180px;">
    <ul id="nav" class="easyui-tree" data-options="animate:true,dnd:true"></ul>
</div>
<div data-options="region:'center'" style="overflow:hidden;">
    <div id="tabs">
        <div title="起始页" iconCls="icon-man" style="padding:10px 10px;display:block;">
            沙城：起于2016年。

        </div>
    </div>
</div>
<!--<div data-options="region:'south',title:'footer',split:true,noheader:true" style="height:45px;line-height:45px;text-align:center;">
    &copy;copyright 2021-2099 殇念-沙城-Cx. Powered by flysand-cx.
</div>-->
<div data-options="region:'south',title:'footer',split:true,noheader:true" class="foot"
     style="height:45px;line-height:40px;text-align:center;overflow: hidden;background-color: #E0ECFF;">
    &copy;copyright 2016-2099 殇念-沙城-Cx.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Powered by flysand-cx.
</div>
</body>
</html>